<template>
  <div class="emergency_box">
    <div class="emergency_top">
      <div class="emergency_title">故障次数排行</div>
      <!-- <div class="emergency_month">
        <div :class="searchDateNumber == 2? 'emergency_ThisMarch1':'emergency_March'" @click="getMarchList"><span>近三个月</span></div>
        <div :class="searchDateNumber == 1? 'emergency_ThisMarch1':'emergency_LastMarch'" @click="getLastMarchList"><span>上月</span></div>
        <div :class="searchDateNumber == 0? 'emergency_ThisMarch2':'emergency_ThisMarch'" @click="getList"><span>本月</span></div>
      </div> -->
    </div>
    <div v-if="tableData&&tableData.length>0" class="echarts_main">
      <!-- <div class="echarts_main_left">
        <div v-for="(item,index) in tableData" :key="index" class="left_item">
          <div class="left_item_index" :class="index>2?'grey':''">{{ index+1 }}</div>
          <div class="left_item_name">{{ item.name }}</div>
        </div>
      </div> -->
      <div id="map2" class="echarts_main_right" style="height:100%;width:100%" />
    </div>
    <div v-else class="echarts_noData">
      <svg-icon icon-class="暂无数据" />
    </div>

  </div>
</template>

<script>
import { deviceSparePartsConsumptionRanking } from '@/api/equipmentManage/equipmentReport/dataBoard'
export default {
  data() {
    return {
      msg: 'fafa',
      tableData: [],
      searchDateNumber: 0
    }
  },
  mounted() {
    // this.drawLine()
    this.tableData = [
      { name: '设备1', times: 6 },
      { name: '设备2', times: 5 },
      { name: '设备3', times: 4 },
      { name: '设备4', times: 3 },
      { name: '设备5', times: 2 },
      { name: '设备6', times: 1 }
    ]
    this.$nextTick(() => {
      this.drawLine()
    })
  },
  created() {
    this.$nextTick(() => {
      this.drawLine()
    })
  },
  methods: {
    drawLine() {
      const myChart = this.$echarts.init(document.getElementById('map2'))
      this.tableData.map(item => item.times).sort((a, b) => b - a)
      var max = Math.max.apply(null, this.tableData.map(item => item.times))
      var getMax = []
      for (let i = 0; i < this.tableData.map(item => item.name).length; i++) {
        getMax.push(max)
      }
      const colorList = ['rgba(102, 107, 255, 1)', 'rgba(96, 181, 255,1)', 'rgba(96, 221, 255, 1)', 'rgba(96, 255, 234, 1)', 'rgba(96, 255, 199, 1)', 'rgba(96, 255, 104, 1)']
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          formatter: function(params) {
            return params[0].name + ' : ' + params[0].value
          }
        },
        xAxis: {
          show: false,
          type: 'value'
        },
        grid: {
          right: '12%',
          left: '19%',
          top: '4%',
          bottom: '1%'
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            offset: 120,
            axisLabel: {
              show: true,
              align: 'left',
              textStyle: {
                color: 'rgba(102, 102, 102, 1)',
                fontSize: '16'
              },
              formatter: function(value, index) {
                var num = ''
                var str = ''
                num = index + 1
                if (index == 0 || index == 1 || index == 2) {
                  str = '{no1|' + '} {num|' + num + '} {title1| ' + value + '}'
                } else {
                  str = '{no1|' + '} {num1|' + num + '} {title1| ' + value + '}'
                }
                return str
              },
              rich: {
                num: {
                  color: 'rgba(51, 51, 51, 1)',
                  backgroundColor: 'rgba(255, 154, 220, 1)',
                  width: 20,
                  height: 20,
                  borderRadius: 20,
                  fontSize: 14,
                  align: 'center'
                },
                num1: {
                  color: 'rgba(51, 51, 51, 1)',
                  backgroundColor: 'rgba(153, 153, 153, 1)',
                  width: 20,
                  height: 20,
                  borderRadius: 20,
                  fontSize: 14,
                  align: 'center'
                }
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: this.tableData.map(item => item.name)
          }
        ],
        series: [
          {
            name: '值',
            type: 'bar',
            label: {
              show: true,
              position: 'right',
              textStyle: {
                color: '#666666',
                fontSize: '16'
              }
            },
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: [0, 6, 6, 0],
                color: (params) => {
                  return colorList[params.dataIndex]
                }
              }
            },
            barWidth: 12,
            data: this.tableData.map(item => item.times)
          }

        //   {
        //     name: '背景',
        //     type: 'bar',
        //     barWidth: 20,
        //     barGap: '-100%',
        //     data: getMax,
        //     itemStyle: {
        //       color: '#152448'
        //       // barBorderRadius: 30,
        //     }
        //   }
        ]
      })
    }
  }
}
</script>

<style lang="less" scoped>
.emergency_box{
  width: 100%;
  height: calc(100% - 50px);
}
.emergency_top{
  display: flex;
  justify-content: space-between;
  .emergency_title{
    font-size: 20px;
    font-weight: bold;
    line-height: 34px;
    letter-spacing: -0.21px;
    color: #333333;
    padding-top: 16px;
    padding-left: 20px;
  }
  .emergency_month{
    display: flex;
    font-size: 18px;
    font-weight: normal;
    line-height: 25px;
    letter-spacing: -0.16px;
    color: #999999;
    padding-top: 22px;
    padding-right: 20px;
    cursor: pointer;
    .emergency_ThisMarch1{

      font-size: 18px;
      font-weight: normal;
      line-height: 25px;
      letter-spacing: -0.16px;
      color: #387BFC;
      padding-right: 30px;
    }
    .emergency_ThisMarch2{

      font-size: 18px;
      font-weight: normal;
      line-height: 25px;
      letter-spacing: -0.16px;
      color: #387BFC;
    }
    .emergency_March{
      padding-right: 30px;
    }
    .emergency_LastMarch{
      padding-right: 30px;
    }
  }
}
.echarts_main{
  width: 100%;
  height: 100%;
  display: flex;
  .echarts_main_left{
    width: 20%;
    height: 100%;
    padding: 20px 10px 20px 21px;
    display: flex;flex-direction: column;flex-wrap: wrap;

    .left_item{
      display: flex;align-items: center;
      flex: 1;
      .left_item_index{
        background-color: rgba(255, 182, 173, 1);
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: flex;justify-content: center;align-items: center;
      }
      .grey{
        background-color: rgba(231, 231, 231, 1)
      }
      .left_item_name{
        padding-left: 20px;
        width: calc(100% - 30px);
        height: 30px;
        display: flex;justify-content: flex-start;align-items: center;
        font-size: 16px;
        color: rgba(51, 51, 51, 1);
        overflow:hidden; //超出的文本隐藏
        text-overflow:ellipsis; //溢出用省略号显示
        white-space:nowrap; //溢出不换行
      }
    }
  }
  .echarts_main_right{
    width: 80%;
    height: 100%;
  }
}
</style>

